<template>
    <div class="goodsinfo">
        <myheader title="商品详情"></myheader>
        <transition  v-on:before-enter="beforeEnter"
                     v-on:enter="enter"
                     v-on:after-enter="afterEnter">
            <div class="ball" v-show="flag"></div>
        </transition>

<!--        导航组件-->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <swipe :swipeList="swipeList"></swipe>
                </div>
            </div>
        </div>
<!--        商品购买组件-->
        <goodsbuy :goodsinfo="goodsinfo" @buttondown="addShopcart"></goodsbuy>
<!--        商品信息展示组件-->
        <goodsshow :id="id" :goodsinfo="goodsinfo" :goodsdesc="goodsdesc"></goodsshow>
    </div>
</template>

<script>
    import myheader from '../../components/header'
    import swipe from  '../../components/swipe'
    import goodsbuy  from './goodsbuy'
    import goodsshow from './goodsShow'
    export default {
        name: "goodsinfo",
        components:{
            myheader,
            swipe,
            goodsbuy,
            goodsshow
        },
        props:['id'],
        data(){
            return {
                swipeList:[],
                goodsinfo:{},
                goodsdesc:{},
                flag:false
            }
        },
        methods:{
            beforeEnter(el){//这是vue自带的设置过渡效果的方法，beforeEnter过渡执行之前的状态，有一个参数el
                //el：表示transition包裹的dom结构：也就是我们的小球
                // js中要控制某个元素，分两步：第一步，获取到这个元素，第二步就是控制他的一些属性
                // var ball = document.querySelector('.ball')//字符串里面放控制器，有个好处就是css怎么写，这就怎么写
                // console.log(ball,el);
                el.style.transform = 'translate(0,0)'
            },
            enter(el){  //enter:过渡中间的el的状态，transform。transition
                // el.clientHeight
                el.clientWidth
                el.style.transform = 'translate(30px,-30px)'
                el.style.transition ='all .2s ease-out'
            },
            afterEnter(el){//动画过渡结束时候小球的状态
                // transform: translate(55px,420px)
                //先把这两个元素的具体位置拿到，然后让购物车的位置减去小球的位置，得到真实移动的位置
              var ballposition =  el.getBoundingClientRect()//小球的位置对象
            var badgeposition = document.querySelector('.badge').getBoundingClientRect()
                // 拿到购物车的位置对象
                var x = badgeposition.x - ballposition.x  //水平方向的位移
                var y = badgeposition.y - ballposition.y

                el.style.transform = `translate(${x+30}px,${y-30}px)`  //模板字符串插入变量的方法${}
                el.style.transition ='all .6s ease-in'
                this.flag = false //让小球消失
                // console.log(ballposition);
            },
            addShopcart(count){ //添加购物车，把你选择的商品，包括所有的信息提交给购物车组件，还要完成一个小球动画启动的功能
                this.flag = true

                var addShopData = {
                    id:this.goodsinfo.id,
                    img:this.swipeList[0].img,
                    title:this.goodsinfo.title,
                    price:this.goodsinfo.market_price,
                    count:count,
                    selected:true,
                    stock:this.goodsinfo.stock_quantity
                }
                this.$store.commit('ADD_SHOPCART',addShopData)

            },
            getSwipeList(){ //获取轮播图数据
              this.$http.get('api/getthumimages/'+this.id).then(res=>{
                  res.body.message.forEach(item=>{ // item是数组中的每一项
                      item.img = item.src
                  })
                  this.swipeList = res.body.message
              },err=>{

              })
            },
            getgoodsinfo(){ //申请goodsbuy组件需要的数据
                this.$http.get('api/goods/getinfo/'+this.id).then(res=>{
                    // console.log(res);
                    this.goodsinfo = res.body.message[0]  //表示我们把这个数组的第一项赋值给goodsinfo
                },err=>{

                })
            },
            getgoodsdesc(){  //获取商品图文数据
                this.$http.get('api/goods/getdesc/'+this.id).then(res=>{
                    // console.log(res);
                    this.goodsdesc = res.body.message[0]
                },err=>{

                })
            }
        },
        created(){
            this.getSwipeList();
            this.getgoodsinfo();
            this.getgoodsdesc();
        }
    }
</script>

<style scoped>
    .ball{
        position: absolute;
        top: 348px;
        left: 161px;
        width: 16px;
        height: 16px;
        background-color: red;
        border-radius: 50%;
        z-index: 10;
        /*;*/
    }
</style>
